window.onload=function(){
	//面向对象：抽象  多态  继承  封装
	//vue实例：成员  行为
	new Vue({
		el: "#app",
		data:{
			pageNo: 0,
			pageSize: 10,
			url: "http://127.0.0.1:3000/news/page/",
			data: [],
			isLoading: false,
			endOfTheScreen: false
		},
		created(){
			this.loadData(this.pageNo, this.pageSize);
			var self = this;
			window.onscroll = function(){
				self.endOfTheScreen = self.scrollCheck();
			}
		},
		watch: {
			endOfTheScreen(newValue){
				if (newValue){
					console.log("endOfTheScreen")
					this.pageNo++;
					this.loadData(this.pageNo, this.pageSize);
				}
			}
		},
		methods:{
			scrollCheck(){
				var winHeight = window.scrollY + window.innerHeight;
				console.log(winHeight === document.documentElement.offsetHeight)
				return winHeight === document.documentElement.offsetHeight;
			},
			loadData(pageNo, pageSize){
				this.isLoading = true;
				setTimeout(()=>{
					fetch(this.url+pageNo+"/"+pageSize)
					.then(res =>{
						return res.json();
					})
					.then(res => {
						console.log(res)
						for(let i in res.data){
							this.data.push(res.data[i])
						}
						this.isLoading = false;
					})
				}, 2000)
				
			}
		}
	})
}